<template>
  <div class="card_table tableSelf">
    <header class="config_arr btwn" style="borderBottom:none">
      <div class="left">
        <el-switch v-if="byFieldsBool" v-model="structure" active-text="分层" inactive-text="平铺"></el-switch>
      </div>
      <div class="right">
        <el-date-picker
          size="small"
          clearable
          :picker-options="pickerOptions"
          v-model="dateRange"
          class="time"
          placeholder="日期限定"
        ></el-date-picker>
        <el-tooltip
          v-if="!structure"
          class="tishi"
          effect="light"
          :content="dateCollapse?'折叠日期':'展开日期'"
          placement="bottom"
        >
          <i @click="dateCollapseChange" class="el-icon-date"></i>
        </el-tooltip>
        <el-tooltip class="tishi" effect="light" content="导出" placement="bottom">
          <i class="el-icon-position"></i>
        </el-tooltip>
      </div>
    </header>
    <section :key="updateBool">
      <!-- 无分组 平铺 折叠日期 -->
      <template
        v-if="!byFieldsBool&&!dateCollapse&&table_nogroup_tile_nodate.length>0&&allRes.length>0"
      >
        <el-table
          :data="table_nogroup_tile_nodate"
          border
          style="width: 100%"
          :header-cell-style="{background:'#f2f8ff'}"
          empty-text="未知"
        >
          <el-table-column align="center" width="260" :prop="time" label="日期">
            <template slot-scope="scope">
              <span class="tableBD tableBDSmall" v-if="scope.row.time.one">
                <span class="one">{{scope.row.time.one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row.time.two}}</span>
              </span>
              <span v-else>
                <span>{{scope.row.time}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            min-width="200"
            v-for="(_i,_in) in  queryTotal.messures"
            :key="_i.id"
            :prop="_i.id"
          >
            <template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.field.eventName}}
              </span>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
                <span
                  :class="upDown(scope.row[_i.id].one,scope.row[_i.id].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.id].one,scope.row[_i.id].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 无分组 平铺 展开日期 -->
      <template
        v-if="!byFieldsBool&&dateCollapse&&table_nogroup_tile_date.length>0&&allRes.length>0"
      >
        <el-table
          :data="table_nogroup_tile_date"
          border
          style="width: 100%"
          :header-cell-style="{background:'#f2f8ff'}"
          empty-text="未知"
        >
          <el-table-column align="left" width="180" :prop="time" label="指标">
            <template slot-scope="scope">
              <span class="table_head" v-if="scope.row.messures.one">
                <span class="icon">{{convert(scope.row.messures.one.index+1)}}</span>
                {{scope.row.messures.one.name}}
              </span>
              <span class="table_head" v-else>
                <span class="icon">{{convert(scope.row.messures.index+1)}}</span>
                {{scope.row.messures.name}}
              </span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="240">
            <template slot="header">
              <span class="timeSpan" v-if="table_nogroup_tile_date[0].time.one">
                <span class="one">{{table_nogroup_tile_date[0].time.one.name}}</span>
                <br>
                {{table_nogroup_tile_date[0].time.two.name}}
              </span>
              <span class="timeSpan" v-else>
                <!-- {{table_nogroup_tile_date[0].time.name}} -->
                <el-select v-model="tableType" size="mini" placeholder="请选择">
                  <el-option label="合计" :value="1"></el-option>
                  <el-option label="均值" :value="2"></el-option>
                  <el-option label="最小值" :value="3"></el-option>
                  <el-option label="最大值" :value="4"></el-option>
                </el-select>
              </span>
            </template>

            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row.time.one">
                <span class="one">{{scope.row.time.one.value}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row.time.two.value}}</span>
                <span
                  :class="upDown(scope.row.time.one.value,scope.row.time.two.value)>=0?'up':'down'"
                >{{upDown(scope.row.time.one.value,scope.row.time.two.value)}}%</span>
              </span>
              <span v-else>
                <span v-if="tableType==1">{{scope.row.time.value}}</span>
                <span v-if="tableType==2">{{scope.row.time.avgValue}}</span>
                <span v-if="tableType==3">{{scope.row.time.minValue}}</span>
                <span v-if="tableType==4">{{scope.row.time.maxValue}}</span>
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            min-width="240"
            v-for="(_i) in timeChoose(allRes[0].totalDetailResult.series)"
            :key="_i"
          >
            <template slot="header">
              <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">{{_i.name}}</span>
                <br>
                {{allRes[1].totalDetailResult.series[_i.index]}}
              </span>
              <span class="timeSpan" v-else>{{_i.name}}</span>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row[_i.index].one">
                <span class="one">{{scope.row[_i.index].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.index].two}}</span>
                <span
                  :class="upDown(scope.row[_i.index].one,scope.row[_i.index].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.index].one,scope.row[_i.index].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.index]}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 有分组 平铺 展开日期-->
      <template v-if="byFieldsBool&&!structure&&dateCollapse&&allRes.length>0">
        <el-table
          :data="groupScreening(table_group_tile_date)"
          border
          :span-method="arraySpanMethod"
          style="width: 100%"
          :header-cell-style="{background:'#f2f8ff'}"
          empty-text="未知"
        >
          <el-table-column
            align="center"
            min-width="160"
            v-for="(_i,_in) in  allRes[0].detailResult.byFields"
            :key="_i.id"
            :label="_i.propertyName"
            :prop="_i.id"
          >
            <template slot="header">
              <label>
                {{_i.propertyName}}
                <i
                  :style="{position:'relative',left:'10px'}"
                  class="el-icon-s-operation"
                ></i>
                <el-select
                  v-if="arrGroupOptions[_in]&&arrGroupOptions[_in].checked"
                  class="show_hidden"
                  v-model="arrGroupOptions[_in].checked"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in arrGroupOptions[_in].options"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </label>
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row[_i.id].one">
                <span>{{scope.row[_i.id].one}}</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span>
            </template>
          </el-table-column>

          <el-table-column align="left" min-width="240" label="指标" prop="zhibiao">
            <template slot-scope="scope">
              <span class="table_head" v-if="scope.row.zhibiao.one">
                <span class="icon">{{convert(scope.row.zhibiao.one.index+1)}}</span>
                {{scope.row.zhibiao.one.name}}
              </span>
              <span class="table_head" v-else>
                <span class="icon">{{convert(scope.row.zhibiao.index+1)}}</span>
                {{scope.row.zhibiao.name}}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="240">
            <template slot="header">
              <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">
                  {{allRes[0].totalDetailResult.series[0]}} 至
                  {{allRes[0].totalDetailResult.series[allRes[0].totalDetailResult.series.length-1]}}
                </span>
                <br>
                <span class="one">
                  {{allRes[1].totalDetailResult.series[0]}} 至
                  {{allRes[1].totalDetailResult.series[allRes[1].totalDetailResult.series.length-1]}}
                </span>
              </span>
              <span class="timeSpan" v-else>
                <el-select v-model="tableTypeGroup" size="mini" placeholder="请选择">
                  <el-option label="合计" :value="1"></el-option>
                  <el-option label="均值" :value="2"></el-option>
                  <el-option label="最小值" :value="3"></el-option>
                  <el-option label="最大值" :value="4"></el-option>
                </el-select>
              </span>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row.total.one">
                <span class="one">{{scope.row.total.one.value}}</span>
                <br>
                <span class="three">{{scope.row.total.two.value}}</span>
              </span>
              <span v-else>
                <span v-if="tableTypeGroup==1">{{scope.row.total.value}}</span>
                <span v-if="tableTypeGroup==2">{{scope.row.total.avgValue}}</span>
                <span v-if="tableTypeGroup==3">{{scope.row.total.minValue}}</span>
                <span v-if="tableTypeGroup==4">{{scope.row.total.maxValue}}</span>
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            min-width="240"
            v-for="(_i) in  timeChoose(allRes[0].totalDetailResult.series)"
            :key="_i"
          >
            <template slot="header">
              <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">{{_i.name}}</span>
                <br>
                {{allRes[1].totalDetailResult.series[_i.index]}}
              </span>
              <span class="timeSpan" v-else>{{_i.name}}</span>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row[_i.index].one">
                <span class="one">{{scope.row[_i.index].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.index].two}}</span>
                <span
                  :class="upDown(scope.row[_i.index].one,scope.row[_i.index].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.index].one,scope.row[_i.index].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.index]}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 有分组 平铺 折叠日期 -->
      <template v-if="byFieldsBool&&!structure&&!dateCollapse&&allRes.length>0">
        <!-- table_group_tile_nodate -->
        <el-table
          :data="groupScreening(table_group_tile_nodate)"
          style="width: 100%"
          row-key="id"
          :tree-props="{children: 'children'}"
          :header-cell-style="{background:'#f2f8ff'}"
          empty-text="未知"
        >
          <el-table-column align="left" width="60"></el-table-column>
          <!-- 160 -->
          <el-table-column
            align="center"
            :width="_in==allRes[0].detailResult.byFields.length-1?240:140"
            v-for="(_i,_in) in  allRes[0].detailResult.byFields"
            :key="_i.id"
            :label="_i.propertyName"
            :prop="_i.id"
          >
            <template slot="header">
              <label>
                {{_i.propertyName}}
                <i
                  :style="{position:'relative',left:'10px'}"
                  class="el-icon-s-operation"
                ></i>
                <el-select
                  class="show_hidden"
                  v-if="arrGroupOptions[_in]&&arrGroupOptions[_in].checked"
                  v-model="arrGroupOptions[_in].checked"
                  multiple
                  placeholder="请选择"
                >
                  <!-- <el-option
                    label="全选"
                    value="全选Joker"
                  ></el-option> -->
                  <el-option
                    v-for="item in arrGroupOptions[_in].options"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </label>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="zhi">至</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            min-width="200"
            v-for="(_i,_in) in  queryTotal.messures"
            :key="_i.id"
            :prop="_i.id"
          >
            <template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.field.eventName}}
              </span>
            </template>
            <template slot-scope="scope">
              <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
                <span
                  :class="upDown(scope.row[_i.id].one,scope.row[_i.id].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.id].one,scope.row[_i.id].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 有分组 分层 -->
      <template v-if="byFieldsBool&&structure&&allRes.length>0">
        <div class="groupBox">
          <layeredPanel
            :currentPage="currentPage"
            :pageSize="pageSize"
            :lastWidth="260"
            :widthGroup="200"
            :widthIndex="200"
            :dateScreen="dateRange"
            :enter="queryTotal"
            :out="allRes"
          ></layeredPanel>
        </div>
      </template>
    </section>
    <footer>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 30, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="current_change"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </footer>
  </div>
</template>
<script>
import mock from "./mock.js"; // 引入模拟入参
import layeredPanel from "./layeredPanel.vue"; // 引入分层表格组件
// import analysisApi from "@/utils/api/analysisApi.js"; // 引入接口文件
let sTime = 0;
let eTime = 0;
export default {
  name: "tableSelf",
  props: {
    // queryTotal: {
    //   type: Object,
    //   default: () => {
    //     return {};
    //   }
    // }
    joker: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    layeredPanel
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页数量
      total: 0, // 数据总量
      arrGroupOptions: [], // 分组可选值
      tableTypeGroup: 1, // 有分组 平铺 展开日期下的 合计 均值 最小值 最大值
      tableType: 1, // 无分组 平铺 展开日期下的 合计 均值 最小值 最大值
      updateBool: 0,
      byFieldsBool: false, // 判断是否具有分组参数
      allRes: [], // 存储请求的全部数据
      queryTotal: {}, // 接受的 入参查询字字符串
      dateCollapse: false, // 是否展开日期
      dateRange: null, // 日期限定，表格数据筛选
      structure: false, // 判断是否分层开关
      //  日期选择器时间限定范围函数
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > eTime || time.getTime() < sTime - 8.64e7; //大于当前的禁止，小于7天前的禁止
        }
      },
      table_nogroup_tile_nodate: [], // 无分组 平铺 折叠日期  表格
      table_nogroup_tile_date: [], // 无分组 平铺 展开日期  表格
      table_group_tile_date: [], // 有分组 平铺 展开日期  表格
      table_group_tile_nodate: [] // 有分组 平铺 折叠日期  表格
    };
  },
  watch: {
    dateRange: {
      handler() {
        this.tableInit();
      },
      deep: true
    },
    structure: {
      handler() {
        this.tableInit();
      },
      deep: true
    }
  },
  methods: {
    handleSizeChange(v) {
      this.pageSize = v;
      this.tableInit();
    },
    current_change(v) {
      this.currentPage = v;
      this.tableInit();
    },
    // 时间列筛选
    timeChoose(arr) {
      let _arr = [];
      arr.map((item, index) => {
        if (!this.dateRange) {
          _arr.push({
            name: item,
            index: index
          });
        }
        if (this.zeroDel(this.dateRange) == item) {
          _arr.push({
            name: item,
            index: index
          });
        }
      });
      return _arr;
    },
    // 在有分组的情况下，根据选中分组值进行表格筛选
    groupScreening(arr) {
      let _arr = arr.filter(item => {
        let bool = true;

        try {
          this.arrGroupOptions.map(_i => {
            let _bool = false;
            _i.checked.map(_is => {
              if (
                _is == item[_i.id] ||
                _is == item[_i.id].one ||
                _is == item[_i.id].two
              ) {
                _bool = true;
              }
            });
            if (!_bool) {
              bool = false;
            }
          });
        } catch (err) {
          console.log(err, "分组筛选错误");
        }
        return bool;
      });
      return _arr;
    },
    // 获取分组可选值函数
    getArrGroup(enter, out) {
      let _arr = JSON.parse(JSON.stringify(enter.byFields));
      _arr.map(_i => {
        _i.options = [];
      });
      out.map(item => {
        item.detailResult.rows.map(itemRow => {
          itemRow.byValues.map((itemByv, indexByv) => {
            if (_arr[indexByv]) {
              _arr[indexByv].options.push(itemByv);
            }
          });
        });
      });
      _arr.map(item => {
        item.options = Array.from(new Set(item.options));
        item.checked = Array.from(new Set(item.options));
      });
      return _arr;
    },
    // 计算上升下降比例
    upDown(one, two) {
      if (!two || two == 0) {
        return 100;
      }
      return ((one - two) / two).toFixed(2) * 100;
    },
    // 折叠展开日期函数
    dateCollapseChange() {
      this.dateCollapse = !this.dateCollapse;
      this.tableInit();
    },
    // 时间戳转日期
    zeroDel(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();
      mon = mon < 10 ? "0" + mon : mon;
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    },
    //  0 - 25  转化 a - z
    convert(num) {
      return num <= 26
        ? String.fromCharCode(num + 64)
        : this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
    },
    // 数据查询函数
    async queryData() {
      this.queryTotal = mock.enterTable; // 模拟入参
      // let res = await analysisApi.eventAnalysis.computeEventReport(
      //   this.queryTotal
      // );
      let res = {}; // 模拟出参

      if (this.joker.searchTime.contrastStartDate) {
        res.value = mock.outTwo;
      } else {
        res.value = [mock.outTwo[0]];
      }
      this.total = res.value[0].detailResult.rows.length;
      //  根据出参 限定日期选择范围
      let st = res.value[0].detailResult.series[0];
      let et =
        res.value[0].detailResult.series[
          res.value[0].detailResult.series.length - 1
        ];
      sTime = new Date(st);
      eTime = new Date(et);
      // 判断是否具有分组属性
      if (this.queryTotal.byFields && this.queryTotal.byFields.length > 0) {
        this.byFieldsBool = true;
        // this.arrGroupOptions = this.getArrGroup(this.queryTotal, this.allRes);
        this.arrGroupOptions = this.getArrGroup(this.queryTotal, res.value);
      } else {
        this.byFieldsBool = false;
      }
      this.allRes = res.value; // 保存全部出参
      this.tableInit(); //  执行表格渲染函数
      // if (res.success) {

      // }
    },
    // 分页函数
    pageHandle(arr, currentPage, pageSize) {
      let _arr = [];
      currentPage = Number(currentPage);
      pageSize = Number(pageSize);
      for (
        let i = (currentPage - 1) * pageSize;
        i <= (currentPage - 1) * pageSize + pageSize - 1;
        i++
      ) {
        if (arr[i]) {
          _arr.push(JSON.parse(JSON.stringify(arr[i])));
        }
      }

      return _arr;
    },
    // 表格数据绘制函数
    tableInit() {
      // 具有分组值时，更新分组列选中项
      if (this.byFieldsBool) {
        this.arrGroupOptions = this.getArrGroup(this.queryTotal, this.allRes);
      }
      let arr = JSON.parse(JSON.stringify(this.allRes));
      // 无分组 平铺 折叠日期  表格
      if (!this.byFieldsBool && !this.dateCollapse) {
        let resArr = [];
        arr.map(item => {
          let _arr = [];
          // 执行分页 
          let pageArr = this.pageHandle(item.totalDetailResult.series,this.currentPage,this.pageSize);
          // 根据时间长度生成对应表格对应行
          pageArr.map((itemTime, indexTime) => {
            let obj = {};
            // 生成时间列
            obj.time = itemTime;
            // 根据入参，生成指标列
            this.queryTotal.messures.map((itemMess, indexMess) => {
              obj[itemMess.id] =
                item.totalDetailResult.rows[0].values[indexTime][indexMess];
            });
            _arr.push(obj);
          });
          resArr.push(_arr);
        });
        if (resArr.length == 2) {
          let _arr = [];
          resArr[0].map((_i, _in) => {
            let obj = {};
            for (let key in _i) {
              obj[key] = {
                one: _i[key],
                two: resArr[1][_in][key]
              };
            }
            _arr.push(obj);
          });
          resArr = _arr;
        }
        if (resArr.length == 1) {
          resArr = resArr[0];
        }
        this.table_nogroup_tile_nodate = JSON.parse(JSON.stringify(resArr));
      }

      // 无分组 平铺 展开日期  表格
      if (!this.byFieldsBool && this.dateCollapse) {
        let resArr = [];
        arr.map(item => {
          let _arr = [];
          // 执行分页切割
          let pageArr = this.pageHandle(this.queryTotal.messures,this.currentPage,this.pageSize);
          // 行数根据入参指标生成
          pageArr.map((itemMess, indexMess) => {
            let obj = {};
            // 生成指标列
            obj.messures = {
              name: itemMess.name,
              index: indexMess
            };
            // 生成日期合并计算列
            obj.time = {
              name:
                item.totalDetailResult.series[0] +
                "至" +
                item.totalDetailResult.series[
                  item.totalDetailResult.series.length - 1
                ],
              value: item.rollupResult.rows[0].values[0][indexMess],
              minValue: item.rollupResult.rows[0].minValues[0][indexMess],
              maxValue: item.rollupResult.rows[0].maxValues[0][indexMess],
              avgValue: item.rollupResult.rows[0].avgValues[0][indexMess]
            };
            // 生成每天的数据列
            item.totalDetailResult.series.map((itemSer, indexSer) => {
              obj[indexSer] =
                item.totalDetailResult.rows[0].values[indexSer][indexMess];
            });

            _arr.push(obj);
          });
          resArr.push(_arr);
        });
        if (resArr.length == 2) {
          let _arr = [];
          resArr[0].map((_i, _in) => {
            let obj = {};
            for (let key in _i) {
              obj[key] = {
                one: _i[key],
                two: resArr[1][_in][key]
              };
            }
            _arr.push(obj);
          });
          resArr = _arr;
        }
        if (resArr.length == 1) {
          resArr = resArr[0];
        }
        this.table_nogroup_tile_date = JSON.parse(JSON.stringify(resArr));
      }

      // 有分组 平铺 展开日期  表格
      if (this.byFieldsBool && !this.structure && this.dateCollapse) {
        let resArr = [];
        arr.map(item => {
          let _arr = [];
          let pageArr = this.pageHandle(item.detailResult.rows,this.currentPage,this.pageSize)
          pageArr.map((itemRow, indexRow) => {
            this.queryTotal.messures.map((itemMess, indexMess) => {
              let obj = {};
              // 分组值列追加
              item.detailResult.byFields.map((itemBY, indexBY) => {
                obj[itemBY.id] = itemRow.byValues[indexBY];
              });
              // 指标列
              obj.zhibiao = {
                index: indexMess,
                name: itemMess.name
              };
              // 合计值列
              obj.total = {
                value: item.rollupResult.rows[indexRow].values[0][indexMess],
                minValue:
                  item.rollupResult.rows[indexRow].minValues[0][indexMess],
                maxValue:
                  item.rollupResult.rows[indexRow].maxValues[0][indexMess],
                avgValue:
                  item.rollupResult.rows[indexRow].avgValues[0][indexMess]
              };

              // 时间列追加
              item.detailResult.series.map((itemTime, indexTime) => {
                obj[indexTime] = itemRow.values[indexTime][indexMess];
              });
              _arr.push(obj);
            });
          });
          resArr.push(_arr);
        });
        if (resArr.length == 2) {
          let _arr = [];
          resArr[0].map((_i, _in) => {
            let obj = {};
            for (let key in _i) {
              obj[key] = {
                one: _i[key],
                two: resArr[1][_in][key]
              };
            }
            _arr.push(obj);
          });
          resArr = _arr;
        }
        if (resArr.length == 1) {
          resArr = resArr[0];
        }
        this.table_group_tile_date = JSON.parse(JSON.stringify(resArr));
      }
      // 有分组 平铺 折叠日期  表格
      if (this.byFieldsBool && !this.structure && !this.dateCollapse) {
        let resArr = [];
        arr.map(item => {
          let _arr = [];
          let pageArr = this.pageHandle(item.rollupResult.rows,this.currentPage,this.pageSize);
          pageArr.map(itemRow => {
            let obj = {};
            obj.id = itemRow.byValues.join("$id$");
            obj.children = [];
            // 分组列追加
            item.rollupResult.byFields.map((itemBY, indexBY) => {
              obj[itemBY.id] = itemRow.byValues[indexBY];
            });

            // 指标列追加
            this.queryTotal.messures.map((itemMess, indexMess) => {
              obj[itemMess.id] = itemRow.values[0][indexMess];
            });

            // 时间分割子级列表
            let str = itemRow.byValues.join("");
            let objChildren;
            item.detailResult.rows.map(itemDeta => {
              if (str == itemDeta.byValues.join("")) {
                objChildren = JSON.parse(JSON.stringify(itemDeta));
              }
            });
            if (objChildren) {
              objChildren.values.map((itemChildren, indexChildren) => {
                // 对日期筛选
                let time = arr[0].detailResult.series[indexChildren];
                if (this.zeroDel(this.dateRange) == time || !this.dateRange) {
                  let _obj = {};
                  _obj.id = itemRow.byValues.join("$id$") + indexChildren;
                  // 分组列追加
                  item.rollupResult.byFields.map((itemBY, indexBY) => {
                    if (indexBY == item.rollupResult.byFields.length - 1) {
                      _obj[itemBY.id] = item.detailResult.series[indexChildren];
                    } else {
                      _obj[itemBY.id] = "";
                    }
                  });
                  // 指标列追加
                  this.queryTotal.messures.map((itemMess, indexMess) => {
                    _obj[itemMess.id] = itemChildren[indexMess];
                  });
                  obj.children.push(_obj);
                }
              });
            }

            _arr.push(obj);
          });
          resArr.push(_arr);
        });
        if (resArr.length == 2) {
          resArr = this.arrMerge(resArr);
        }
        if (resArr.length == 1) {
          resArr = resArr[0];
        }
        this.table_group_tile_nodate = JSON.parse(
          JSON.stringify(this.aproArrangement(resArr, this.queryTotal.byFields))
        );
      }
      this.updateBool++;
    },
    arrMerge(arr) {
      let _arr = [];

      for (let i = 0; i <= arr[0].length - 1; i++) {
        let obj = {};
        for (let key in arr[0][i]) {
          let str = null;
          this.queryTotal.messures.map(_i => {
            if (_i.id == key) {
              str = "指标";
            }
          });
          this.queryTotal.byFields.map(_i => {
            if (_i.id == key) {
              str = "分组";
            }
          });
          if (str == "指标") {
            obj[key] = {
              one: arr[0][i][key],
              two: arr[1][i][key]
            };
          }
          if (str == "分组" || key == "id") {
            obj[key] = arr[0][i][key];
          }
          if (key == "children" && !str) {
            let _arr = [];
            // obj.children = arr[0][i].children
            arr[0][i].children.map((_i, _in) => {
              let _obj = {};
              for (let _key in _i) {
                let bool = false;
                this.queryTotal.messures.map(_is => {
                  if (_is.id == _key) {
                    bool = "指标";
                  }
                });
                this.queryTotal.byFields.map(_is => {
                  if (_is.id == _key) {
                    bool = "分组";
                  }
                });
                if (bool == "指标") {
                  _obj[_key] = {
                    one: arr[0][i].children[_in][_key],
                    two: arr[1][i].children[_in][_key]
                  };
                } else if (bool == "分组") {
                  if (arr[0][i].children[_in][_key]) {
                    _obj[_key] = {
                      one: arr[0][i].children[_in][_key],
                      two: arr[1][i].children[_in][_key]
                    };
                  } else {
                    _obj[_key] = _i[_key];
                  }
                } else {
                  _obj[_key] = _i[_key];
                }
              }
              _arr.push(_obj);
            });
            obj.children = _arr;
          }
        }
        _arr.push(obj);
      }
      return _arr;
    },
    // 将数组根据分组值进行近似排布
    aproArrangement(arr, key, index = 0) {
      if (!key || key.length == 0 || !key[index]) {
        return arr;
      }
      let _arr = JSON.parse(JSON.stringify(arr));
      let _key = JSON.parse(JSON.stringify(key));
      _arr.sort((a, b) => {
        return a[_key[index].id].localeCompare(b[_key[index].id]);
      });
      if (key[index + 1]) {
        let arrIndex = [0];
        for (let i = 1; i <= _arr.length - 1; i++) {
          if (_arr[i][key[index].id] !== _arr[i - 1][key[index].id]) {
            arrIndex.push(i);
          }
        }
        arrIndex.push(_arr.length);
        let arrSlice = [];
        for (let j = 0; j <= arrIndex.length - 2; j++) {
          let _arrSub = _arr.slice(arrIndex[j], arrIndex[j + 1]);
          arrSlice.push(_arrSub);
        }

        for (let k = 0; k <= arrSlice.length - 1; k++) {
          arrSlice[k] = this.aproArrangement(arrSlice[k], key, index + 1);
        }
        return arrSlice.flat();
      }

      return _arr;
    },
    // 分组 平铺 展开日期合并单元格计算
    arraySpanMethod({ rowIndex, columnIndex }) {
      let num = this.queryTotal.messures.length;
      if (rowIndex % num === 0) {
        if (columnIndex < this.queryTotal.byFields.length) {
          return [num, 1];
        }
      }
      if (rowIndex % num !== 0) {
        if (columnIndex < this.queryTotal.byFields.length) {
          return [0, 0];
        }
      }
    }
  },
  beforeCreate() {},
  created() {
    this.queryData(); // 查询全部数据
  },
  beforeMount() {},
  mounted() {},
  computed: {}
};
</script>

<style scoped lang="scss">
::v-deep .groupBox .el-table__body-wrapper {
  height: 0;
  overflow: hidden;
}
::v-deep .el-table {
  margin: 0 auto;
}
::v-deep label .el-input--suffix {
  height: 0.5rem;
  overflow: hidden;
}
// .tableSelf::-webkit-scrollbar {
//   display: none;
// }
::v-deep .tableBDShow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    width: 60%;
    height: 100%;
    display: inline-block;
    text-align: right;
    .top {
      color: #1f2d3d;
      font-size: 0.26rem;
      padding-right: 0.6rem;
    }
    .btm {
      font-size: 0.2rem;
      color: #909399;
    }
  }
  .right {
    display: inline-block;
    height: 100%;
    width: 40%;
  }
}
// 比对样式
::v-deep .tableBD {
  width: 100%;
  display: inline-block;
  .one {
    color: #1f2d3d;
    font-size: 0.22rem;
    margin: 0 0.2rem 0 0;
  }
  .two {
    display: inline-block;
    font-size: 0.16rem;
    background: #f6f7f8;
    line-height: 1;
    border-radius: 50%;
    margin: 0 0.2rem 0 0;
    border: 1px solid #e0e6ed;
    text-align: center;
    padding: 4px 5px;
  }
  .zhi {
    margin: 0 0.2rem 0 0;
  }
  .three {
    font-size: 0.2rem;
    color: #909399;
    margin: 0 0.2rem 0 0;
  }
  .up,
  .down {
    font-size: 0.16rem;
  }
  .up {
    color: #00bf8a;
  }
  .down {
    color: red;
  }
}
::v-deep .tableBDSmall {
  .one {
    font-size: 0.2rem;
  }
  .three {
    color: #1f2d3d;
  }
}
::v-deep .timeSpan {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  .one {
    font-size: 12px;
    font-weight: 600;
  }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba($color: #01b27a, $alpha: 0.1);
}
.table_head {
  .icon {
    background: #00bf8a;
    color: white;
    display: inline-block;
    text-align: center;
    line-height: 0.3rem;
    width: 0.3rem;
    cursor: pointer;
    height: 0.3rem;
    border-radius: 50%;
    margin: 0 0.1rem;
  }
}
.tableSelf {
  box-sizing: border-box;
  // overflow: scroll;
  margin: 0.3rem auto;
  padding-bottom: 0.2rem;
  .config_arr {
    width: 100%;
    margin: 0.1rem auto;
    min-height: 0.6rem;
    border-bottom: 1px solid #e4e7ed;
    .cancle_arr {
      height: 0.6rem;
      cursor: pointer;
      width: 3.8rem;
      line-height: 0.5rem;
      font-size: 12px;
      opacity: 0.3;
      .icon {
        display: inline-block;
        text-align: center;
        line-height: 0.3rem;
        width: 0.3rem;
        cursor: pointer;
        height: 0.3rem;
        background: #c0c4cc;
        border-radius: 50%;
        color: #606266;
        margin: 0 0.1rem;
      }
      .no_icon {
        display: inline-block;
        text-align: center;
        line-height: 0.3rem;
        width: 0.3rem;
        cursor: pointer;
        height: 0.3rem;
        border-radius: 50%;
        color: white;
        margin: 0 0.1rem;
        background: #909399;
      }
    }
    .index_arr {
      opacity: 1;
      .icon {
        background: #00bf8a;
        color: white;
      }
    }
  }
  .btwn {
    min-height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .min_el {
      width: 1.6rem;
      margin-right: 0.3rem;
    }
    .time {
      width: 3.8rem;
      margin: 0 0.1rem;
    }
    .total_screen {
      cursor: pointer;
      position: relative;
      width: 99%;
      margin: 0 0 0 0.2rem;
      color: #307ef2;
      i {
        font-weight: 800;
      }
    }
    .right {
      span {
        width: 0.4rem;
        height: 0.4rem;
        display: inline-block;
        text-align: center;
        line-height: 0.4rem;
        margin: 0 0.1rem;
        border-radius: 2px;
      }
      .active {
        background: rgba($color: #01b27a, $alpha: 0.6);
        color: rgba($color: white, $alpha: 0.8);
        font-weight: 800;
      }
    }
  }
  .tishi {
    width: 0.6rem;
    text-align: center;
    i {
      font-weight: 800 !important;
      font-size: 26px !important;
    }
  }
  footer {
    height: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
</style>
